<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src='dist/index.global.js'></script>
<script src='js/jquery-3.6.0.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
<script>
    // 从URL参数获取is_open值
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }
    
    var is_open = getUrlParameter('is_open') ? parseInt(getUrlParameter('is_open')) : 1;
</script>
<style>
  *{margin:0;padding:0;}
  img{border:none;vertical-align:top;}
  html,body{width:100%;height:100%;overflow:hidden;background: linear-gradient( 225deg, #FBEBC9 0%, #ECE5CD 67%, #F9F7ED 100%);}

  div,img{
      margin: 0;
      padding: 0;
      border: 0 none;
      outline: 0px;
      tap-highlight-color: rgba(0,0,0,0);
      focus-ring-color: rgba(0, 0, 0, 0);
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-focus-ring-color: rgba(0, 0, 0, 0);
      -moz-tap-highlight-color: rgba(0,0,0,0);
      -moz-focus-ring-color: rgba(0, 0, 0, 0);
  }

  @font-face{
      font-family: 'zhonghei';
      src : url('font/zhonghei.ttf');
  }

  @font-face{
      font-family: 'zhenghei';
      src : url('font/zhenghei.ttf');
  }

  .zhonghei{
      font-family: 'zhonghei';
  }

  .zhenghei{
      font-family: 'zhenghei';
  }

  #calendar {
    max-width: 97%;
    margin: 0 auto;
      background: #fff;
      box-shadow: 0px 4px 10px 0px rgba(190,142,56,0.15);
      border-radius: 14px;
  }

  .fc-timegrid-slot {
  height: 120px !important;
}

.div_timetable_content_size{
  font-size: 16px;color: #1D1E25;line-height: 40px;height:40px;cursor: pointer;
}


  .event-0 {background-color: #000000 !important;border-color: #000000 !important;color: #000000 !important;font-family: 'zhonghei';}
  .event-1 {background-color: #73A4C2 !important;border-color: #73A4C2 !important;color: #73A4C2 !important;font-family: 'zhenghei';}
  .event-2 {background-color: #8EA238 !important;border-color: #8EA238 !important;color: #8EA238 !important;font-family: 'zhenghei';}
  .event-3 {background-color: #E67100 !important;border-color: #E67100 !important;color: #E67100 !important;font-family: 'zhenghei';}
  .event-4 {background-color: #B07BB6 !important;border-color: #B07BB6 !important;color: #B07BB6 !important;font-family: 'zhenghei';}
  .event-5 {background-color: #E55D5D !important;border-color: #E55D5D !important;color: #E55D5D !important;font-family: 'zhenghei';}
  .event-6 {background-color: #4A8C48 !important;border-color: #4A8C48 !important;color: #4A8C48 !important;font-family: 'zhenghei';}
  .event-7 {background-color: #BE8E38 !important;border-color: #BE8E38 !important;color: #BE8E38 !important;font-family: 'zhenghei';}
  .event-8 {background-color: #647EDA !important;border-color: #647EDA !important;color: #647EDA !important;font-family: 'zhenghei';}
  .event-9 {background-color: #D1AD29 !important;border-color: #D1AD29 !important;color: #D1AD29 !important;font-family: 'zhenghei';}
/* 你可以继续添加更多颜色 */

  .calendar_status{
    color:#fff;background:#DAB97B;
  }

  .fc .fc-toolbar.fc-header-toolbar{
      margin-bottom:0px !important;
  }
  .div_type_size{
      font-size:12px;margin-right:10px;font-family: 'zhenghei';
  }
  .a_dian{
      margin-right:3px;width:10px;height:10px;display:inline-block;border-radius:5px;
  }

  .div_left_menu{
      cursor:pointer;height:44px;line-height:44px;width:65%;text-align:center;margin-bottom:40px;
  }

  .div_left_menu_hover{
      background:#000;border-radius:22px;color:#fff;
  }

  .fc-toolbar-title{
      font-family: 'zhenghei';
  }

  .fc-timegrid-slot-label-cushion{
      font-family: 'zhenghei';
  }

  .fc-col-header-cell-cushion{
      font-family: 'zhenghei';
  }
</style>
</head>
<body>
    <div style="position: relative;width:100%;height:100%;">
        <div id="div_left" style="float: left;width:23%;height:100%;">
            <div style="position: relative;width:100%;text-align: center;margin-top:120px;">
                <img src="images/logo.png" style="width:20%;" />
            </div>
            <div style="position: relative;width:100%;margin-top:100px;display:flex;justify-content: center;flex-wrap:wrap;marign-top:20px;font-size:16px;color: #1D1E25;font-style: normal;">
                <div onclick="cli_tiao(1);" id="menu_1" class="div_left_menu">预约列表</div>
                <div onclick="cli_tiao(2);" id="menu_2" class="div_left_menu">时间锁定管理</div>
                <div onclick="cli_tiao(3);" id="menu_3" class="div_left_menu zhenghei">来访记录</div>
            </div>
        </div>
        <div id="div_right" style="float:left;width:76%;margin-top:20px;">
            <div style="width:100%;background:rgba(255,255,255,0.55);box-shadow: 0px 10px 20px 0px rgba(190,142,56,0.24);border-radius: 30px;backdrop-filter: blur(4px);">
                <div style="width:97%;margin-left:1.5%;height: 68px;line-height: 68px;">
                    <span class="zhonghei" style="font-weight: normal;font-size: 20px;color: #BE8E38;line-height: 24px;font-style: normal;">飞鹤营养科技体验中心</span>
                    <span class="zhenghei" style="font-weight: normal;font-size: 18px;color: #1D1E25;line-height: 21px;font-style: normal;margin-left:16px;">预约管理系统</span>
                </div>
                <div style="position: relative;width:100%;">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>


    <div id="div_timetable" style="display:none;position: fixed;width:100%;height:100%;top:0px;left:0px;z-index:10000;">
        <div style="position: absolute;width:100%;height:100%;top:0px;left:0px;background: #000;opacity: 0.8;"></div>
        <div id="div_timetable_content" style="position: absolute;width:160px;top:25%;border: 1rpx solid #E4E5E5;padding-top:30px;padding-bottom:30px;background: #fff;border-radius: 4px;">
            <div style="position: absolute;font-size:24px;top: -6px;right: 2%;color:#000000;cursor: pointer;" onclick="cli_clo_timetable();">×</div>
            <div style="position: relative;width:90%;margin-left:5%;text-align:center;">
                <div onclick="cli_status(1);" id="div_status_1" class="div_timetable_content_size">维护</div>
                <div style="width:100%;height:1px;background:#EFEFEF;"></div>
                <div onclick="cli_status(2);" id="div_status_2" class="div_timetable_content_size">系统升级</div>
                <div style="width:100%;height:1px;background:#EFEFEF;"></div>
                <div onclick="cli_status(3);" id="div_status_3" class="div_timetable_content_size">维修</div>
                <div style="width:100%;height:1px;background:#EFEFEF;"></div>
                <div onclick="cli_status(4);" id="div_status_4" class="div_timetable_content_size">闭馆</div>
                <div style="width:100%;height:1px;background:#EFEFEF;"></div>
                <div onclick="cli_status(5);" id="div_status_5" class="div_timetable_content_size">内部活动</div>
                <div style="width:100%;height:1px;background:#EFEFEF;"></div>
                <div onclick="cli_calendar_status();" style="cursor: pointer;margin-top:20px;font-size: 16px;color: #ffffff;line-height:40px;height:40px;background:#DAB97B;border-radius:20px;">确认锁定</div>
            </div>
        </div>
    </div>
<script>
    var w = document.documentElement.clientWidth||document.body.clientWidth;
    var h = document.documentElement.clientHeight||document.body.clientHeight;
    $('#div_left').css({"height":h+"px"});
    var left = (w - 100) / 2;
    $('#div_timetable_content').css({"left":left+"px"});

    var calendar_start_time = "";
    var calendar_end_time = "";
    var status = 0;
    $(function(){

    });

  var today = new Date();
  var year = today.getFullYear();
  var month = String(today.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1
  var day = String(today.getDate()).padStart(2, '0');
  var current_day = year+"-"+month+"-"+day

  document.addEventListener('DOMContentLoaded', function() {
    // 根据is_open值设置菜单样式
    updateMenuStyle();
    
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        height:h - 88,
        initialDate: current_day,
      slotMinTime: "09:00:00", // 新增
      slotMaxTime: "18:00:00", // 新增
      slotDuration: '01:00:00',
      allDaySlot: false,
      initialView: 'timeGridWeek',
      nowIndicator: true,
      locale: 'zh-cn',
      editable: false, // 禁止拖拽
      eventStartEditable: false, // 禁止拖动事件开始时间
      eventDurationEditable: false, // 禁止拖动调整事件时长
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: ''//timeGridWeek
      },
      slotLabelFormat: {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      },
        datesSet: function() {
            // 检查是否已插入，避免重复
            if (!document.getElementById('my-custom-bar')) {
                // 找到标题元素
                var titleEl = calendarEl.querySelector('.fc-toolbar-title');
                if (titleEl) {
                    // 创建自定义元素
                    var customBar = document.createElement('div');
                    customBar.id = 'my-custom-bar';
                    var ht = '<div style="width:100%;height:50px;display: flex;align-items: flex-end;">'+
                                '<div class="div_type_size" style="margin-left:10px;color:#73A4C2;"><a class="a_dian" style="background: #73A4C2;"></a>内部学习/培训备份</div>'+
                                '<div class="div_type_size" style="color:#8EA238;"><a class="a_dian" style="background: #8EA238;"></a>产品/品牌体验备份</div>'+
                                '<div class="div_type_size" style="color:#E67100;"><a class="a_dian" style="background: #E67100;"></a>公众参观/科普教育备份</div>'+
                                '<div class="div_type_size" style="color:#B07BB6;"><a class="a_dian" style="background: #B07BB6;"></a>商业邀约/参观备份</div>'+
                                '<div class="div_type_size" style="color:#E55D5D;"><a class="a_dian" style="background: #E55D5D;"></a>社会团体/学术交流备份</div>'+
                                '<div class="div_type_size" style="color:#4A8C48;"><a class="a_dian" style="background: #4A8C48;"></a>VIP/定向邀约备份</div>'+
                                '<div class="div_type_size" style="color:#BE8E38;"><a class="a_dian" style="background: #BE8E38;"></a>政府考察/调研备份</div>'+
                                '<div class="div_type_size" style="color:#647EDA;"><a class="a_dian" style="background: #647EDA;"></a>媒体/机构备份</div>'+
                                '<div class="div_type_size" style="color:#D1AD29;"><a class="a_dian" style="background: #D1AD29;"></a>其他</div>'+
                            '</div>';
                    customBar.innerHTML = ht;

                    // 插入到标题后面
                    titleEl.parentNode.parentNode.insertAdjacentElement('afterend', customBar);
                }
            }
        },
      select: function(arg) {
        $('#div_timetable').show();
        console.log(arg.start+"==="+arg.end)
        calendar_start_time = changeTime(arg.start);
        calendar_end_time = changeTime(arg.end);

        // var title = prompt('Event Title:');
        // if (title) {
        //   calendar.addEvent({
        //     title: title,
        //     start: arg.start,
        //     end: arg.end,
        //     allDay: arg.allDay
        //   })
        // }
        // calendar.unselect()
      },
      // eventClick: function(arg) {
      //   if (confirm('Are you sure you want to delete this event?')) {
      //     arg.event.remove()
      //   }
      // },
      navLinks: true, // can click day/week names to navigate views
      //editable: true,
      selectable: true,
      selectMirror: true,
      dayMaxEvents: true, // allow "more" link when too many events
      eventContent: function(arg) {
        var lines = arg.event.title.split('\n');
        return { html: lines.join('<br>') }
      },
      events: function(info, successCallback, failureCallback) {
        var start_time = new Date(info.startStr);
        var end_time = new Date(info.endStr);
        var start_time = changeTime(start_time);
        var end_time = changeTime(end_time);
        get_reservation(start_time,end_time,successCallback);

      },

      // events: [
      //   {
      //     title: 'All Day Event',
      //     start: '2023-01-01',
      //     className: 'event-green'
      //   },
      //   {
      //     title: 'Long Event',
      //     start: '2023-01-07',
      //     end: '2023-01-10',
      //     className: 'event-yellow'
      //   },
      //   {
      //     groupId: 999,
      //     title: 'Repeating Event',
      //     start: '2023-01-09T16:00:00',
      //     className: 'event-yellow'
      //   },
      //   {
      //     groupId: 999,
      //     title: 'Repeating Event',
      //     start: '2023-01-16T16:00:00'
      //   },
      //   {
      //     title: 'Conference',
      //     start: '2023-01-11',
      //     end: '2023-01-13'
      //   },
      //   {
      //     title: 'Meeting\n第二行',
      //     start: '2023-01-12T10:30:00',
      //     end: '2023-01-12T12:30:00',
      //     className: 'event-green'
      //   },
      //   {
      //     title: 'Lunch',
      //     start: '2023-01-12T12:00:00'
      //   },
      //   {
      //     title: 'Meeting\n第二行',
      //     start: '2023-01-12T14:30:00'
      //   },
      //   {
      //     title: 'Happy Hour',
      //     start: '2023-01-12T17:30:00'
      //   },
      //   {
      //     title: 'Dinner',
      //     start: '2023-01-12T20:00:00'
      //   },
      //   {
      //     title: 'Birthday Party',
      //     start: '2023-01-13T07:00:00'
      //   },
      //   {
      //     title: 'Click for Google',
      //     url: 'http://google.com/',
      //     start: '2023-01-28'
      //   }
      // ]
    });

    calendar.render();
  });

  async function get_reservation(start_time, end_time, successCallback){
    try {
        const response = await axios.post('/admin/query', {
            start_time: start_time,
            end_time: end_time,
            is_open: is_open
        });
        
        if(response.data.code == 0){
            var data = response.data.data || [];
            var array = [];

            for(var i=0;i<data.length;i++){
                if(data[i].reservation == 0){
                    var title = data[i].status;
                    var className = "event-0";
                }else{
                    var title = data[i].realname+" "+data[i].visitor_number+"位";
                    if(data[i].type == 1){
                        var className = "event-1";
                    }else if(data[i].type == 2){
                        var className = "event-2";
                    }else if(data[i].type == 3){
                        var className = "event-3";
                    }else if(data[i].type == 4){
                        var className = "event-4";
                    }else if(data[i].type == 5){
                        var className = "event-5";
                    }else if(data[i].type == 6){
                        var className = "event-6";
                    }else if(data[i].type == 7){
                        var className = "event-7";
                    }else if(data[i].type == 8){
                        var className = "event-8";
                    }else if(data[i].type == 9){
                        var className = "event-9";
                    }

                }
                array.push({
                    title:title,
                    start:data[i].start_time,
                    end:data[i].end_time,
                    className:className,
                });
            }

            successCallback(array);
        }
    } catch (error) {
        console.error('获取预约数据失败:', error);
        successCallback([]);
    }
  }

  function cli_clo_timetable(){
    $('#div_timetable').hide();
    $('.div_timetable_content_size').removeClass('calendar_status');
  }

  function cli_status(s){
    $('.div_timetable_content_size').removeClass('calendar_status');
    $('#div_status_'+s).addClass('calendar_status');
    status = s;
  }

  async function cli_calendar_status(){
    try {
        const response = await axios.post('/admin/calendar/status', {
            status: status,
            calendar_start_time: calendar_start_time,
            calendar_end_time: calendar_end_time
        });
        
        if(response.data.code == 0){
            window.location.href = window.location.href;
        } else {
            alert(response.data.msg || '添加失败');
        }
    } catch (error) {
        alert('添加失败: ' + (error.response?.data?.msg || error.message));
    }
  }
  
  function updateMenuStyle() {
      // 实现原PHP的动态类名逻辑
      // 菜单1：if($is_open == 1) 'div_left_menu_hover zhonghei' else 'zhenghei'
      if(is_open == 1) {
          $('#menu_1').removeClass('zhenghei').addClass('div_left_menu_hover zhonghei');
      } else {
          $('#menu_1').removeClass('div_left_menu_hover zhonghei').addClass('zhenghei');
      }
      
      // 菜单2：if($is_open == 0) 'div_left_menu_hover zhonghei' else 'zhenghei'  
      if(is_open == 0) {
          $('#menu_2').removeClass('zhenghei').addClass('div_left_menu_hover zhonghei');
      } else {
          $('#menu_2').removeClass('div_left_menu_hover zhonghei').addClass('zhenghei');
      }
      
      // 菜单3始终是zhenghei（来访记录）
      $('#menu_3').removeClass('div_left_menu_hover zhonghei').addClass('zhenghei');
  }

  function cli_tiao(n){
      if(n == 1){
          window.location.href = "calendar.html";
      }else if(n == 2){
          window.location.href = "calendar.html?is_open=0";
      }else if(n == 3){
          window.location.href = "list.html";
      }
  }

  function changeTime(time){
    let now = new Date(time),
            Y = now.getFullYear(),
            M = now.getMonth()+1,
            D= now.getDate(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds();
    M = M<10?'0'+M:M;
    D = D<10?'0'+D:D;
    h = h<10?'0'+h:h;
    m = m<10?'0'+m:m;
    s = s<10?'0'+s:s;
    return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
  }
</script>
</body>
</html> 